// import { useState } from 'react'
import { Form, Button, Input, message } from 'antd'
import s from "./index.module.less";
import FormObject from "./formObject";

function App(): JSX.Element {
  const [form] = Form.useForm();
  // const [config, setConfig] = useState<any>({
  //   path: '',
  //   name: '',
  //   port: 0,
  //   ip: '',
  //   MirFilePath: '', // 客户端目录文件名
  //   Resources: '', // 补丁目录文件名
  //   pakUrl: '', // 补丁目录文件名
  // })

  const onFinish = async (values: any) => {
    console.log(values);
    const isTure = await window.api.weiduan({ ...values, port: parseInt(values.port) })
    if (isTure) {
      message.success('修改成功')
    }
  };

  return (
    <div className={s.box}>
      <h1>微端一键配置</h1>

      <Form
        form={form}
        onFinish={onFinish}
        layout="vertical"
        size='small'
      >
        <Form.Item
          label="请输入微端文件夹所在路径"
          name="path"
          rules={[{ required: true, message: '请输入微端文件夹所在路径!' }]}
        >
          <FormObject.H />
        </Form.Item>

        <Form.Item
          label="请输入登录器中的Pak.txt路径:(如D:\无尽大陆\登录器Pak.txt)"
          name="pakUrl"
          rules={[{ required: true, message: '请输入登录器中的Pak.txt路径!' }]}
        >
          <FormObject.H type='selectDirectoryFile' />
        </Form.Item>

        <Form.Item
          label="请输入客户端文件夹名(如E:\17周年\)"
          name="MirFilePath"
          rules={[{ required: true, message: '请输入客户端文件夹名!' }]}
        >
          <FormObject.H />
        </Form.Item>

        <Form.Item
          label="请输入补丁文件夹名"
          name="Resources"
          rules={[{ required: true, message: '请输入补丁文件夹名!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="服务器IP"
          name="ip"
          rules={[{ required: true, message: '请输入服务器IP!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="微端名称"
          name="name"
          rules={[{ required: true, message: '请输入微端名称!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="请输入起始的端口号(后面的端口将根据这个端口递增+1)"
          name="port"
          rules={[{ required: true, message: '端口号!' }]}
        >
          <Input type='number' />
        </Form.Item>
        <Button type='primary' htmlType="submit">确定</Button>
      </Form>

      {/* <div>
        <p>请输入微端文件夹所在路径:</p>
        <div className='flex'>
          <input value={config.path} onChange={(e) => {
            const c = {
              ...config
            }
            c.path = e.target.value
            setConfig(c)
          }} />

          <div className='file-box'>
            <button onClick={() => {
              const c = {
                ...config
              }
              c.path = window.api.syncOperationWindow('selectDirectory')
              setConfig(c)
            }}>浏览</button>
          </div>
        </div>
      </div>

      <div>
        <p>请输入登录器中的Pak.txt路径:(如D:\无尽大陆\登录器Pak.txt)</p>
        <div className='flex'>
          <input value={config.pakUrl} onChange={(e) => {
            const c = {
              ...config
            }
            c.pakUrl = e.target.value
            setConfig(c)
          }} />

          <div className='file-box'>
            <button onClick={() => {
              const c = {
                ...config
              }
              c.pakUrl = window.api.syncOperationWindow('selectDirectoryFile')
              setConfig(c)
            }}>浏览</button>
          </div>
        </div>
      </div>

      <div>
        <p>请输入客户端文件夹名(如E:\17周年\):</p>

        <div className='flex'>
          <input value={config.MirFilePath} onChange={(e) => {
            const c = {
              ...config
            }
            c.MirFilePath = e.target.value
            setConfig(c)
          }} />

          <div className='file-box'>
            <button onClick={() => {
              const c = {
                ...config
              }
              c.MirFilePath = window.api.syncOperationWindow('selectDirectory')
              setConfig(c)
            }}>浏览</button>
          </div>
        </div>
      </div>

      <div>
        <p>请输入补丁文件夹名:</p>
        <input placeholder="" onChange={(e) => {
          const c = {
            ...config
          }
          c.Resources = e.target.value
          setConfig(c)
        }} />
      </div>

      <div>
        <p>服务器IP:</p>
        <input placeholder="" onChange={(e) => {
          const c = {
            ...config
          }
          c.ip = e.target.value
          setConfig(c)
        }} />
      </div>

      <div>
        <p>微端名称:</p>
        <input placeholder="" onChange={(e) => {
          const c = {
            ...config
          }
          c.name = e.target.value
          setConfig(c)
        }} />
      </div>

      <div>
        <p>请输入起始的端口号，后面的端口将根据这个端口递增+1:</p>
        <input placeholder="" type='number' onChange={(e) => {
          const c = {
            ...config
          }
          c.port = parseInt(e.target.value)
          setConfig(c)
        }} />
      </div>
      <Button type='primary' onClick={async () => {
        const isTure = await window.api.weiduan(config)
        console.log(isTure, 'isTure')
        if (isTure) {
        }
      }}>确定</Button> */}

    </div>
  )
}

export default App
